<template>
  <div>
    <div @click='visible = true'>
      <slot></slot>
    </div>
    <mt-popup style="width: 100%; z-index: 99999999;" v-model="visible" position="bottom">
      <mt-picker ref="pickers" :slots="slots" :valueKey="valuekeys" @change="onValuesChange"
                 show-toolbar>
        <span class="mint-datetime-action mint-datetime-cancel" @click.stop="visible = false">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click.stop="confirm">确定</span>
      </mt-picker>
    </mt-popup>
  </div>
</template>
<script>
  /**
   * App component.
   * @module common/plugins/pickerBox
   * @zhangdongliang
   * @description 上拉选择组件，这个组件为了扩展选择组件，用的时候需要传入upscrolldata，
   * 这是一个数组，数组里面的每一个对象需要在外面，
   * 处理成对应的格式（格式可以参见下面的default数据）。
   * 为了适应没有图标的情况增加了一个入参showtype，传入字符串为 noicon 即可实现无图标模式
   * @example <inputSelect placeholder="请选择" type="text"
   iconName="icon-register-qiye"
   v-validate="{ rules: { required: true } }"
   name="企业形态"
   label="企业形态"
   :upscrolldata="companyType"
   v-model="companyTypesend"
   />
   */
  import {col, row} from '@/common/Flex';
  //  import api from '../api/account';
  export default {
    data () {
      return {
        visible: false,
        num: 0
      };
    },
    props: {
      slots: {
        type: Array,
        default: function () {
          return ([
            {
              flex: 1,
              defaultIndex: 0,
              values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
              className: 'slot1',
              textAlign: 'center'
            }, {
              flex: 1,
              defaultIndex: 0,
              values: ['2015-1', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
              className: 'slot3',
              textAlign: 'center'
            }
          ]);
        }
      },
      valuekeys: {
        type: String,
        default: ''
      },
      change: {
        default: ''
      }
    },
    components: {
      'dc-col': col,
      'dc-row': row
    },
    computed: {},
    methods: {
      onValuesChange: function (picker, values) {
        this.num = values.length;
        this.change(picker, values);
        this.crtval = values;
      },
      confirm: function () {
        this.visible = false;
        this.$emit('getValue', this.crtval);
      }
    },
    watch: {
      visible: function () {
        if (this.visible) {
          for (let i = 0; i < this.num; i++) {
            this.$refs.pickers.setSlotValue(i, this.slots[i] && (this.slots[i].values ? this.slots[i].values[0] : []));
          }
        }
      }
    },
    created () {
    }
  };
</script>
<style lang="scss">
  @import '../../assets/css/variable';

</style>
